@import '../../../themes/basic/base-all.less';

:host {
  --ti-progressbar-height: 5px;
}
:host.ti3-progress {
  .box-sizing(border-box);
  display: inline-block;
  position: relative;
  background-color: var(--ti-common-color-line-dividing);
  width: 100%;
  vertical-align: middle;
  overflow: visible;
  height: var(--ti-progressbar-height);
  margin-bottom: 0;
}

.ti3-progress-bar {
  .box-sizing(border-box);
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background-color: var(--ti-common-color-bg-emphasize);
  .transition(width 0.6s ease);
}

.ti3-progress-label {
  display: none;
  .box-sizing(border-box);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: transparent;
  white-space: nowrap;
  color: var(--ti-common-color-text-white);
  text-align: center;
  vertical-align: middle;
  &:after {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
  }
}

.ti3-progress-bar.ti3-progress-no-animation {
  transition: none !important;
  animation: none !important;
}
